<template>
  <!-- 完赛证书模板设置 -->
  <div class="pageWrap">
    <p class="out_tit">活动参与证书</p>
    <el-form class="from">
      <el-form-item>
        <el-radio-group v-model="radio" @change="getModelId">
          <el-radio :label="1">统一模板</el-radio>
          <el-radio :label="2">分组模板</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="radio==2">
        <el-tabs v-model="gId" @tab-click="getModelId">
          <el-tab-pane v-for="v,i in groupArr" :key="i" :label="v.name" :name="v.id+''"></el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item>
        <el-button @click="showTemp=true">设置证书模板</el-button>
      </el-form-item>
      <el-col v-if="modelId>0">
        <el-form-item label="模板预览：" class="noBot">
          <div class="tempModel" :style="{width:tempMsg.width+'px',height:tempMsg.height+'px'}">
            <img :src="tempMsg.imgUrl" style="width:100%;height:100%" />
            <div
              class="tempItem"
              v-for="(v,i) in tempMsg.items"
              :key="i"
              :style="{width: + v.vw+ 'px',height:+v.vh+'px',lineHeight:+v.vh+'px',textAlign:v.align,fontSize:v.size+'px',color:v.color,top:v.top+'px',left:v.left+'px'}"
            >
              <span
                v-show="v.name!='erCode'"
                :style="{display: 'inline-block',transform:`scale(${v.size<12?v.size/12:1})`}"
              >{{v.val}}</span>
              <img :src="v.val" v-show="v.name=='erCode'" style="width:100%;height:100%" />
            </div>
          </div>
        </el-form-item>
      </el-col>
      <el-form-item>
        <el-button v-if="modelId>0" @click="delTemp">删除模板</el-button>
      </el-form-item>
    </el-form>
    <temp :modelId.sync="modelId" tempType="act" :showTemp.sync="showTemp" v-if="showTemp" />
  </div>
</template>

<script>
import temp from "../../../components/temp";
export default {
  components: { temp },
  data() {
    return {
      radio: 1,
      showTemp: false,
      modelId: 0, // 号牌模板id
      tempMsg: "",
      groupArr: [],
      gId: "",
    };
  },
  watch: {
    showTemp(n, o) {
      //   保存模板
      if (n == false && this.modelId > 0) {
        if (this.radio == 1) {
          // 添加统一模板
          let oo = {
            matchId: this.$Base64.decode(sessionStorage.getItem("MandA")),
            certificateId: this.modelId,
          };
          this.$axios
            .get("/sbr/match/putMatchCertificate2", { params: oo })
            .then((res) => {
              this.getTemp();
              this.$message.success("保存成功");
            });
        } else {
          // 添加分组模板
          let oo = {
            groupId: this.gId,
            certificateId: this.modelId,
          };
          this.$axios
            .get("/sbr/match/putMatchInfoCertificate2", { params: oo })
            .then((res) => {
              this.getTemp();
              this.$message.success("保存成功");
            });
        }
      }
    },
  },
  methods: {
    delTemp() {
      this.$confirm("此操作将永久删除该模板, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.radio == 1) {
            let oo = {
              matchId: this.$Base64.decode(sessionStorage.getItem("MandA")),
              certificateId: 0,
            };
            this.$axios
              .get("/sbr/match/putMatchCertificate2", { params: oo })
              .then((res) => {
                this.getModelId();
                this.$message.success("删除成功");
              });
          } else {
            let oo = {
              groupId: this.gId,
              certificateId: 0,
            };
            this.$axios
              .get("/sbr/match/putMatchInfoCertificate2", { params: oo })
              .then((res) => {
                this.getModelId();
                this.$message.success("删除成功");
              });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 查询模板
    getModelId() {
      if (this.radio == 1) {
        this.$axios
          .get("/sbr/match/getMatchById/" + sessionStorage.getItem("MandA"))
          .then((res) => {
            this.modelId = res.data.data.certificateId2;
            if (this.modelId > 0) {
              this.getTemp();
            }
          });
      } else {
        this.$axios
          .get("/sbr/match/getCertificateById2?groupId=" + this.gId)
          .then((res) => {
            this.modelId = res.data.data;
            if (this.modelId > 0) {
              this.getTemp();
            }
          });
      }
    },
    // 获取模板
    getTemp() {
      this.$axios
        .get("/sbr/match/getCertificate?id=" + this.modelId)
        .then((res) => {
          let rr = res.data.data;
          rr.width = parseInt(rr.width / 2);
          rr.height = parseInt(rr.height / 2);
          rr.items = JSON.parse(rr.items);
          rr.items.forEach((v) => {
            v.vw = parseInt(v.vw / 2);
            v.vh = parseInt(v.vh / 2);
            v.size = parseInt(v.size / 2);
            v.top = parseInt(v.top / 2);
            v.left = parseInt(v.left / 2);
          });
          // console.log(rr);
          this.tempMsg = rr;
        });
    },
    // 获取组别信息 /sbr/match/getMatchInfos/MTgy
    getGroupArr() {
      let o = sessionStorage.getItem("MandA");
      this.$axios.get("/sbr/match/getMatchInfos/" + o).then((res) => {
        let rr = res.data.data;
        if (rr) {
          this.groupArr = rr.matchInfoLists;
          this.gId = rr.matchInfoLists[0].id + "";
        }
        this.getModelId();
      });
    },
  },
  mounted() {
    this.getGroupArr();
  },
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
.out_tit {
  font-size: 18px;
  margin-bottom: 15px;
}
.from {
  margin-top: 15px;
}
.tempModel {
  position: relative;
  overflow: hidden;
}
.tempItem {
  position: absolute;
}
</style>